<template>
	<el-container>
		<el-header style="display: block;height:auto;">
			<el-row :gutter="15">
				<el-col :lg="6">
					<sc-statistic title="发行数" :value="countTotal.issueNumber" suffix="件"></sc-statistic>
				</el-col>
				<el-col :lg="6">
					<sc-statistic title="已上架" :value="countTotal.numberOfShelves" suffix="件"></sc-statistic>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model="params.name" placeholder="藏品ID" clearable style="width: 200px"></el-input>
						<el-input v-model="params.name" placeholder="藏品名称" clearable style="width: 200px"></el-input>
						<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
										end-placeholder="结束日期"></el-date-picker>
						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable tableName="templateList" ref="table" :apiObj="apiObj" :column="column"
						 @selection-change="selectionChange" stripe :params="params">

					<template #id="scope">
						<el-button @click="table_show(scope.row, scope.$index)" type="text">{{scope.row.id}}
						</el-button>
					</template>

					<template #onTheShelf="scope">
						<el-switch v-model="scope.row.onTheShelf" :active-value="1" :inactive-value="0" @click="changeUpDown(scope.row, scope.$index)"/>
					</template>

					<template #name="scope">
						<h4>{{scope.row.name}}</h4>
						<p>{{scope.row.subtitle}}</p>
					</template>
					<template #type="scope">
						<el-tag>{{scope.row.type}}</el-tag>
					</template>
					<template #progress="scope">
						<el-progress v-if="scope.row.state=='1'" :percentage="scope.row.progress"></el-progress>
						<el-progress v-if="scope.row.state=='2'" :percentage="scope.row.progress"
									 status="exception"></el-progress>
					</template>

					<!-- 固定列-选择列 -->
					<el-table-column type="selection" width="50" fixed></el-table-column>

					<!-- 固定列-操作列 -->
					<el-table-column label="操作" fixed="right" align="center" width="120">
						<template #default="scope">
							<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑
							</el-button>
						</template>
					</el-table-column>

				</scTable>
			</el-main>
		</el-container>
	</el-container>

	<el-drawer v-model="info" :size="800" custom-class="drawerBG" direction="rtl" destroy-on-close title="详情信息">
		<info></info>
	</el-drawer>

</template>

<script>
	import scStatistic from '@/components/scStatistic';
	import scFilterBar from '@/components/scFilterBar';
	import info from './info'

	export default {
		name: 'list',
		components: {
			scStatistic,
			scFilterBar,
			info
		},
		data() {
			return {
				apiObj: this.$API.publish.nft.list,
				column: [
					{
						label: "系列/作品ID",
						prop: "id",
						width: "200",
						sortable: true
					},
					{
						label: "系列/作品名称",
						prop: "castingName",
						width: "200"
					},
					{
						label: "铸造者",
						prop: "caster",
						width: "100"
					},
					{
						label: "价格",
						prop: "price",
						width: "100"
					},
					{
						label: "燃料值",
						prop: "fuelValue",
						width: "100"
					},
					{
						label: "创建时间",
						prop: "createTime",
						width: "200"
					},
					{
						label: "是否上架",
						prop: "onTheShelf",
						width: "250"
					}
				],
				selection: [],
				list: [],
				info: false,
				params: {
					name: ''
				},
				date: [new Date(new Date().getFullYear(), new Date().getMonth() - 1, new Date().getDay()), new Date()],
				countTotal: {
					issueNumber: 0,
					numberOfShelves: 0
				}
			}
		},
		mounted() {
			this.sumTotal()
		},
		methods: {
			//表格选择后回调事件
			selectionChange(selection) {
				this.selection = selection;
			},
			add() {
				this.$router.push({
					path: `/good/save`
				});
			},
			/**
			 * 统计发行数量
			 */
			async sumTotal() {
				const res = await this.$API.publish.nft.castingSummary.post()
				this.countTotal = res.data
			},
			table_show(row, index) {
				console.log(row, index);
				this.info = true;
				this.id = row.id
			},
			table_edit(row) {
				this.$router.push({
					path: `/good/save`,
					query: {
						id: row.id,
						mode: 'edit',
						type: row.castingType
					}
				});
			},
			filterHandler(value, row, column) {
				const property = column.property;
				return row[property] === value;
			},
			change(data) {
				console.log(data);
			},
			//搜索
			upsearch() {
				this.$refs.table.reload(this.params)
			},
			/**
			 * 上下架
			 */
			async changeUpDown(row) {
				let res = this.$API.publish.nft.changeCollectionStatus.post({id: row.id, status: row.onTheShelf})
				console.log(res)
			}
		}
	}
</script>

<style></style>
